<script lang="ts" setup>
import Header from '@/components/Header/index.vue'
import Footer from '@/components/Footer/index.vue'
import SearchPart from '@/components/SearchPart/index.vue'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { searchProducts } from '@/api/search'
import router from '@/router'

const route = useRoute()

const params = ref({
  keyword: '',
  saleNum: true,
  startPrice: null,
  endPrice: null,
  pageNum: 1,
  pageSize: 20,
})

const toggle = ref(false)
const products = ref([])

const handleSearchData = (data: any) => {
  params.value.keyword = route.query.keyword as string
  const newData = data
    .filter((item: any) => {
      return item.content.hasStock
    })
    .map((item: any) => {
      return {
        id: item.content.id,
        productName: item.content.productName,
        salePrice: item.content.salePrice,
        saleNum: item.content.saleNum,
        stockNum: item.content.stockNum,
        brandName: item.content.brandName,
        sliderUrls: item.content.sliderUrls.split(',')[0],
      }
    })
  console.log(newData)
  products.value = newData
}

const goStore = () => {
  router.push({
    path: '/store',
  })
}

const sortBySales = () => {
  params.value.saleNum = !params.value.saleNum
}

const sortByDefault = () => {
  params.value = {
    keyword: route.query.keyword,
    saleNum: true,
    pageNum: 1,
    pageSize: 20,
  }
}

const toggleShow = () => {
  toggle.value = !toggle.value
}

const nextPage = async () => {
  params.value.pageNum++
  const { data: res } = await searchProducts(params.value)
  handleSearchData(res.data)
}

const prevPage = async () => {
  if (params.value.pageNum > 1) {
    params.value.pageNum--
    const { data: res } = await searchProducts(params.value)
    handleSearchData(res.data)
  }
}

onMounted(() => {
  // 获取搜索数据
  params.value.keyword = route.query.keyword as string
  searchProducts({ keyword: route.query.keyword }).then((res: any) => {
    handleSearchData(res.data.data)
  })
})
</script>

<template>
  <Header />
  <div class="search-wrapper">
    <SearchPart @searchData="handleSearchData" :searchConds="params" />
  </div>
  <div class="search-content-container">
    <div class="search-content-wrapper">
      <div class="filter-container">
        <div class="select-options">
          <div class="open">全部结果：</div>
        </div>
        <div class="filter-list">
          <div class="filter-box">
            <div class="f-key">
              <strong>品牌</strong>
            </div>
            <div class="column-divider"></div>
            <div class="f-items">
              <div class="f-item brand">
                <a href="javascript:void(0)">
                  <div class="pic">
                    <img src="/src/assets/huawei.png" alt="" />
                  </div>
                  <div class="brand">华为</div>
                </a>
              </div>
              <div class="f-item brand">
                <a href="javascript:void(0)">
                  <div class="pic">
                    <img src="/src/assets/honor.jpg" alt="" />
                  </div>
                  <div class="brand">荣耀</div>
                </a>
              </div>
            </div>
          </div>
          <div class="filter-box">
            <div class="f-key">
              <strong>机身内存</strong>
            </div>
            <div class="column-divider"></div>
            <div class="f-items">
              <div class="f-item">
                <a href="javascript:void(0)">1TB</a>
              </div>
              <div class="f-item">
                <a href="javascript:void(0)">512GB</a>
              </div>
              <div class="f-item">
                <a href="javascript:void(0)">256GB</a>
              </div>
              <div class="f-item">
                <a href="javascript:void(0)">128GB</a>
              </div>
              <div class="f-item">
                <a href="javascript:void(0)">64GB</a>
              </div>
              <div class="f-item">
                <a href="javascript:void(0)">32GB及以下</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 排序 -->
      <div class="top-ban">
        <!--排序条件-->
        <div class="sort-items">
          <div class="sort-item">
            <a class="selected" href="javascript:void(0)" @click="sortByDefault">综合排序</a>
          </div>
          <div class="sort-item">
            <a
              class="selected"
              href="javascript:void(0)"
              @click="sortBySales"
              :style="{ color: params.saleNum ? '#ff5000' : '#d9d9d9' }"
              >销量</a
            >
          </div>
          <div class="sort-item price">
            <a class="selected">价格</a>
            <div class="input-box price">
              <div class="input-wrap">
                <span>￥</span
                ><input type="number" v-model.number="params.startPrice" />
              </div>
              &nbsp;-&nbsp;
              <div class="input-wrap">
                <span>￥</span
                ><input type="number" v-model.number="params.endPrice" />
              </div>
            </div>
          </div>
        </div>

        <!--分页条-->
        <div class="top-pagination">
          <div class="toggle" @click="toggleShow">
            <i class="iconfont icon-gongyepin-"></i>
          </div>
          <div class="pagination-wrapper">
            <span>共 <i style="color: #222">64</i> 件商品</span>
            <span><i style="color: red">1</i>/24</span>
            <a
              class="btn-arrow"
              href="#"
              style="display: inline-block"
              @click="prevPage"
              >&lt;</a
            >
            <a
              class="btn-arrow"
              href="#"
              style="display: inline-block"
              @click="nextPage"
              >&gt;</a
            >
          </div>
        </div>
      </div>
      <div class="row-divider" style="margin-bottom: 5px; width: 100%"></div>
      <div class="product-list-container flex-row">
        <div
          :class="['product-item-wrap', toggle ? 'special' : 'default']"
          v-for="(item, index) in products"
          :key="index"
        >
          <div class="product-item" @click="goDetail">
            <div class="product-img">
              <img :src="item.sliderUrls" alt="" />
            </div>
            <div class="product-info">
              <div class="info-title-wrapper">
                <div class="info-title">
                  {{ item.productName }}
                </div>
              </div>
              <div class="tag-list">
                <div class="tag-text">大疆</div>
                <div class="tag-text">无人机</div>
                <div class="tag-text">送运费险</div>
                <div class="tag-text">淘金币减3.9元</div>
              </div>
              <div class="price-wrapper">
                <span class="price-unit">￥</span>
                <span class="price-value">{{ item.salePrice }}</span>
                <span class="month-sale" v-if="item.saleNum > 0"
                  >{{ item.saleNum }}+人购买</span
                >
              </div>
              <div class="store-wrapper">
                <div class="store-name" @click.stop="goStore()">
                  {{ item.brandName }}
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="product-item">
            <div class="product-img">
              <img src="../../assets/vue.svg" alt="" />
            </div>
            <div class="product-info">
              <div class="info-title-wrapper">
                <div class="info-title">
                  大疆 DJI Avata/FPV 航拍机 无人机 高清航拍 二手无人机 大疆
                  Avata 探索套装
                </div>
              </div>
              <div class="tag-list">
                <div class="tag-text">大疆</div>
                <div class="tag-text">无人机</div>
                <div class="tag-text">送运费险</div>
                <div class="tag-text">淘金币减3.9元</div>
              </div>
              <div class="price-wrapper">
                <span class="price-unit">￥</span>
                <span class="price-value">3479.00</span>
                <span class="month-sale">69+人购买</span>
              </div>
              <div class="store-wrapper">
                <div class="store-name">大疆官方旗舰店</div>
                
                <div class="store-location">
                  <i class="iconfont icon-dizhi"></i>
                  <span>浙江 杭州</span>
                </div>
                
              </div>
              
              <div class="service-wrapper">
                <div class="service-item">
                  <i class="iconfont icon-shouhou"></i>
                  <span>7天无理由退货</span>
                </div>
              </div>
              
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
  <Footer />
</template>
<style lang="less" scoped>
.search-wrapper {
  padding: 20px 0;
}
.search-content-container {
  display: flex;
  padding: 20px 0;
  justify-content: center;
  background-color: #d9d9d9;
}
.search-content-wrapper {
  width: 1296px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.filter-container {
  padding: 20px;
  .filter-list {
    padding: 5px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.2);
  }
  .select-options {
    display: flex;
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
  }
  .filter-box {
    display: flex;
    align-content: center;
    position: relative;
    line-height: 24px;
    // padding: 10px 0;
    &:not(:last-child) {
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }
  }
  .f-key {
    font-size: 14px;
    color: #666;
    width: 10%;
    text-align: center;
    margin: auto;
    line-height: 20px;
    font-weight: bold;
  }
  .column-divider {
    width: 2px;
    border-radius: 1px;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.2) inset,
      -1px 0 0 rgba(255, 255, 255, 0.2) inset;
  }
  .row-divider {
    margin: auto;
    width: 98%;
    border-radius: 1px;
    height: 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset,
      0 -1px 0 rgba(255, 255, 255, 0.2) inset;
  }
  .f-items {
    width: 85%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding: 10px;
    .f-item.brand {
      margin: 0 10px 10px 0;
    }
    .f-item.brand a {
      width: 100%;
      height: 100%;
      display: block;
      height: 40px;
      line-height: 40px;
      perspective: 4000px;
      transform-style: preserve-3d;
      transform: translateZ(20px);
      transition: 0.5s;
      &:hover {
        transform: rotateX(90deg) translateZ(20px);
      }
    }
  }

  .f-item {
    width: 80px;
    line-height: 30px;
    font-size: 12px;
    text-align: center;
    .brand {
      transform-origin: top;
      transform: rotateX(-90deg);
      // border: 1px solid #eadeea;
    }
    &:hover .brand {
      color: #ff5000;
    }
    .pic {
      width: 100%;
      height: 40px;
      // border: 1px solid #eadeea;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.btn-arrow {
  border-radius: 3px;
}
.btn-arrow,
.btn-arrow:visited,
.btn-arrow:link,
.btn-arrow:active {
  width: 46px;
  height: 23px;
  border: 1px solid #ddd;
  background: #fff;
  line-height: 23px;
  font-family: '\5b8b\4f53';
  text-align: center;
  font-size: 16px;
  color: #aaa;
  text-decoration: none;
  outline: none;
}

.btn-arrow:hover {
  background-color: #ff5000;
  color: whitesmoke;
}
.sort-items {
  display: flex;
}
.sort-item {
  display: inline-block;
  height: 30px;
  padding: 0 10px;
  line-height: 30px;
  font-size: 13px;
  text-align: center;
  color: #999;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  &.price {
    display: flex;
    a {
      margin-right: 5px;
    }
    .input-box {
      display: flex;
      align-items: center;
    }
    .input-wrap {
      border-radius: 5px;
      overflow: hidden;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      border: 1px solid #e9e9e9;
    }
    span {
      margin-left: 2px;
    }
    input {
      display: inline-block;
      box-sizing: border-box;
      height: 30px;
      width: 60px;
      outline: none;
      padding: 4px;
      border: none;
    }
  }
}
.top-ban {
  // margin-bottom: 20px;
  display: flex;
  padding: 0 20px;
  justify-content: space-between;
}

.top-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  padding: 3px 15px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  color: #999;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.toggle {
  width: 23px;
  height: 23px;
  line-height: 23px;
  text-align: center;
  margin-right: 10px;
  border: 1px solid #e9e9e9;
  cursor: pointer;
  border-radius: 5px;
}

.pagination-wrapper {
  display: flex;
  align-items: center;
}

.top-pagination span {
  margin-right: 10px;
}

.product-list-container {
  padding: 0 20px 20px 20px;
  flex-wrap: wrap;
  // justify-content: space-between;
}

.product-item-wrap.default {
  box-sizing: border-box;
  padding: 10px;
  width: 20%;
  .product-item {
    padding: 10px;
    border-radius: 10px;
    overflow: hidden;
    // box-shadow: @shadow-color;
    transition: all 0.3s;
    &:hover {
      transform: translateY(-5px);
      box-shadow: @shadow-color;
    }
  }
  .product-img {
    width: 100%;
    height: 230px;
    border-radius: 10px;
    background-color: yellow;
    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }
  .info-title {
    font-size: 14px;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
    margin: 10px 0;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .tag-list {
    display: flex;
    box-sizing: border-box;
    padding: 0 2px;
  }
  .tag-text {
    color: #ff5000;
    font-size: 12px;
    &:not(:last-child) {
      margin-right: 5px;
    }
  }
  .price-wrapper {
    margin: 10px 0;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    height: 24px;
  }
  .price-unit,
  .price-value {
    color: #ff5000;
  }
  .price-unit {
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 1px;
    margin-right: 2px;
  }
  .price-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
  }
  .month-sale {
    color: #50607a;
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 1px;
    margin-left: 8px;
  }
  .store-wrapper {
    display: flex;
    cursor: pointer;
    .store-name {
      font-size: 12px;
      line-height: 18px;
    }
  }
}

.product-item-wrap.special {
  padding: 10px 0;
  width: 100%;
  transition: height 1s;
  .product-item {
    display: flex;
    flex: 1;
  }
  .product-img {
    width: 150px;
    max-width: 150px;
    height: 150px;
    border-radius: 10px;
    background-color: yellow;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .info-title {
    font-size: 14px;
    line-height: 20px;
    overflow: hidden;
    margin: 0 0 5px 0;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .tag-list {
    display: flex;
    box-sizing: border-box;
    padding: 0 2px;
    flex-wrap: wrap;
    flex-shrink: 0;
    overflow: hidden;
    justify-content: flex-start;
  }
  .tag-text {
    color: #ff5000;
    font-size: 12px;
    margin-bottom: 5px;
    &:not(:last-child) {
      margin-right: 5px;
    }
  }
  .price-wrapper {
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    flex-direction: row;
    // height: 24px;
  }
  .price-unit,
  .price-value {
    color: #ff5000;
  }
  .price-unit {
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 1px;
    margin-right: 2px;
  }
  .price-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
  }
  .month-sale {
    color: #50607a;
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 1px;
    margin-left: 8px;
  }
  .store-wrapper {
    display: flex;
    cursor: pointer;
    .store-name {
      font-size: 12px;
      line-height: 18px;
    }
  }
}

@media screen and (max-width: 1276px) {
  .product-item-wrap.default {
    width: 25%;
  }
}

@media screen and (max-width: 1032px) {
  .product-item-wrap.default {
    width: 33.3%;
  }
}

@media screen and (max-width: 788px) {
  .product-item-wrap.default {
    width: 50%;
  }
}

@media screen and (max-width: 544px) {
  .product-item-wrap.default {
    width: 100%;
    padding: 0;
  }
  .product-item-wrap.special {
    width: 100%;
    padding: 10px 0;
    .tag-list {
      max-width: 170px;
      // height: 16px;
      // line-height: 16px;
      // overflow: hidden;
    }
    .price-wrapper {
      margin: 5px 0;
    }
    .price-wrapper .wrap {
      width: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      margin-bottom: 5px;
    }
    .month-sale {
      margin: 0;
    }
  }
}

@media screen and (max-width: 640px) {
  .filter-container {
    padding-left: 0;
    padding-right: 0;
  }
  .top-ban {
    flex-wrap: wrap;
  }
  .sort-items {
    width: 100%;
    margin-bottom: 10px;
  }
  .top-pagination {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    justify-content: space-between;
  }
}
</style>
